<template>
	<view class="content">
		<view class="tipsBox">
			<view class="title">填写意见建议</view>
			<view class="tips">温馨提示：请您对自己的言论负责，严格遵守中华人民共和国各项法律和规定，不得发表含有造谣、诽谤及反动内容的言论，如有违反，我们将根据情况追究留言者的责任。</view>
		</view>
		<view class="greyBox"></view>
		<view class="formBox">
			<form catchsubmit="formSubmit">
				<view class="formItem form-input-box">
					<view class="formLable"><text class='red-pot'>*</text>手机号</view>
					<view class="inputBox">
						<input class="form-input" :value="telePhone" name="mobile" placeholder="请输入您的手机号"
							confirm-type="next" placeholder-style="color:#919191;font-size:30rpx"></input>
					</view>
				</view>
				<view class="formItem form-input-box">
					<view class="formLable"><text class='red-pot'>*</text>标题</view>
					<view class="inputBox">
						<input class="form-input" name="title" :value="title" placeholder="请输入标题" confirm-type="next"
							placeholder-style="color:#919191;font-size:30rpx"></input>
					</view>
				</view>
				<view class="formItem form-input-box">
					<view class="formLable"><text class='red-pot'>*</text>投诉内容</view>
					<view class="inputBox">
						<textarea class="form-input" name="content" :value="text" auto-height maxlength="-1"
							style="min-height:300rpx;" placeholder="请输入投诉内容"
							placeholder-style="color:#919191;font-size:30rpx"></textarea>
					</view>
				</view>
				<button class="submitBtn" @click="submit">确认提交</button>
				<view class="bottom-notice">"<text class="red-pot">*</text>"为必填项</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		postComplaintList
	} from '@/api/complaints.js';
	export default {
		data() {
			return {
				telePhone: '',
				title: '',
				text: ''
			}
		},
		methods: {
			findList() {
				let telePhone = telePhone;
				let title = title;
				let text = text;
				postComplaintList({
					telePhone,
					title,
					text
				}).then((res) => {
					if (res.code == 1) {
						uni.showToast({
							title: '投诉成功',
							mask: true,
						})
					} else {
						console.log(res)
					}
				}).catch((res) => {
					console.log(res)
				})
			},
			submit() {
				this.findList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #fff;

		.tipsBox {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 30rpx;

			.title {
				font-size: 34rpx;
				font-weight: bold;
			}

			.tips {
				font-size: 26rpx;
				color: #919191;
				margin-top: 15rpx;
			}
		}

		.greyBox {
			width: 100%;
			height: 25rpx;
			background: #f8f8f8;
		}

		.formBox {
			width: calc(100% - 60rpx);
			margin: auto;
			overflow: hidden;
		}

		.formBox {
			.formItem {
				width: 100%;
				min-height: 100rpx;
				padding: 20rpx 0;
				border-bottom: 3rpx solid #efefef;

				.formLable {
					font-size: 30rpx;
					font-weight: bold;
				}

				.inputBox {
					font-size: 32rpx;
					margin-top: 20rpx;
					color: #919191;
					position: relative;

					.rightArrow {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						top: 50%;
						right: 0rpx;
						transform: translate(-0, -50%);
					}

					.form-input {
						width: calc(100% - 0rpx);
					}
				}
			}
		}

		.formBox .formItem .inputBox .rightArrow {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 50%;
			right: 0rpx;
			transform: translate(-0, -50%);
		}

		.formBox .submitBtn {
			width: calc(100% - 150rpx);
			background: $color-primary;
			color: #fff;
			font-size: 30rpx;
			font-weight: 400;
			border-radius: 40rpx;
			margin-top: 100rpx;
			height: 80rpx;
			padding: 0;
			line-height: 80rpx;
			margin-bottom: 20rpx;
		}

		.bottom-notice {
			margin-bottom: 100rpx;
			font-size: 28rpx;
			width: 100%;
			text-align: center;
			color: #919191;
		}

		.red-pot {
			color: red;
		}
	}
</style>
